<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" name="id" value="{$row.id}">
        <div class="operate-bar">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm"
                    lay-submit="acl.role/saveAuthorize">{:lang('common.btn_confirm')}
            </button>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">{:lang('role.name')}</label>
            <div class="layui-input-block">
                <input type="text" readonly class="layui-input" value="{$row.name|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">{:lang('role.node_ids')}</label>
            <div class="layui-input-block">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </form>
</div>
<link rel="stylesheet" type="text/css" href="{:sysValue('cdn')}/jquery-ztree/3.5.29/css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="{:sysValue('cdn')}/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="{:sysValue('cdn')}/jquery-ztree/3.5.29/js/jquery.ztree.all.min.js"></script>
<script>
    let list = {$permList | raw
    }
    ;
    let chkList = {$permIds | raw
    }
    ;
    $.each(chkList, function (i, n) {
        $.each(list, function (j, m) {
            if (n == m.id) {
                m["checked"] = true;
            }
        });
    });
    let zTree, setting = {
        check: {
            enable: true,
            chkboxType: {
                Y: 'p',
                N: 's'
            }
        },
        data: {
            key: {
                name: 'title'
            },
            simpleData: {
                enable: true,
                pIdKey: 'pid'
            }
        }
    };
    $(function () {
        zTree = $.fn.zTree.init($("#tree"), setting, list);
        zTree.expandAll(true);
    });
    layui.use(['myCommon'], function () {
        let myCommon = layui.myCommon;
        myCommon.listen(function (data) {
            let nodes = zTree.getCheckedNodes(true), ids = [];
            $.each(nodes, function (i, n) {
                ids.push(n.id);
            });
            data.node = JSON.stringify(ids);
            return data;
        });
    });
</script>
